<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新型冠状病毒实时数据统计</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head{
            width: 90%;
            margin: 0 auto;
        }
        .content{
            width: 90%;
            margin: 30px auto;
        }
        .search{
            overflow: hidden;
            width: 90%;
            height: 130px;
            margin: 0 auto;
            line-height: 140px;
        }
        .lookfor{
            float: right;
            margin-top: 50px;
        }
        .title{
            font-size: 30px;
            font-weight: bold;
            float: left;
        }
        .text{
            display: block;
            float: left;
            width: 350px;
            /*margin: 30px 0;*/
        }
        .button{
            display: block;
            float: left;
            /*margin: 30px 2px;*/
        }
        .box{
            width: 100%;
            margin-left: 5%;
            text-align: center;
            overflow: hidden;
        }
        .data{
            text-align: center;
            width:30%;
            height: 160px;
            line-height: 100px;
            float: left;
            font-size: 18px;
            font-weight: bold;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="head mdui-table-fluid">
    <div id="app">
        <div  class="search">
            <div class="title">{{data.name}}新冠病毒实时数据统计</div>
            <div class="lookfor">
                <input class="text mdui-textfield-input" v-model="keyword" placeholder="搜索某国家或地区新冠状病毒情况"/>
                <button class="button mdui-btn mdui-btn-raised mdui-ripple"  round @click="search">查询</button>
            </div>

        </div>
        <div>
            <div align="center">
                <ve-line :data="chartData" width="95%" height="450px"></ve-line>
            </div>
            <div class="box" >
                <div class="data">
                    <span>病例总数：</span><span style="font-size: 28px">{{data.totalNow}}</span>
                </div>
                <div class="data">
                    <span>新增病例总数：</span><span style="font-size: 28px">{{data.addedNow}}</span>
                </div>
                <div class="data">
                    <span>当前时间：</span><span style="font-size: 28px">{{data.nowDate}}</span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="mdui-table-fluid">
                <div class="mdui-table mdui-table-hoverable">
                    <el-table
                            :data="data.totalData"
                            border
                            style="width: 100%;margin-top: 10px;">
                        <el-table-column
                                prop="id"
                                label="编号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="state"
                                label="州/省">
                        </el-table-column>
                        <el-table-column
                                prop="country"
                                label="国家/地区">
                        </el-table-column>
                        <el-table-column
                                prop="latestTotalCases"
                                label="累计病例">
                        </el-table-column>
                        <el-table-column
                                prop="diffFromPrevDay"
                                label="新增病例">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                chartData: {} ,            //全球累计总数的拆线数据
                data:{},                    //全球总数据
                keyword:""                  //查询词
            }
        },
        methods:{
            search(){
                if (this.keyword==""){
                    axios.get("/latest").then(Response => {
                        this.data = Response.data;
                        this.chartData = Response.data.chart;
                    })
                }else{
                    axios.get("/"+this.keyword).then(Response => {
                        this.data = Response.data;
                        this.chartData = Response.data.chart;
                    })
                }
            },
        },
        created: function () {
            axios.get("/latest").then(Response => {
                this.data = Response.data;
                this.chartData = Response.data.chart;
            })
        }
    })
</script>
</html>